<template>
    <div class="example-block">
        <el-cascader v-model="value" :options="options" @change="handleChange" :props="prop" ref="cascaderAddr" :placeholder="placeholder"/>
    </div>
</template>
<script lang="ts" setup>

import { ref,defineProps,onMounted } from 'vue'
const emit = defineEmits(['change'])
const value = ref<string[]>([])
const cascaderAddr = ref()

const prop = ref({
  checkStrictly: false,
})

const options= ref([])
const props = defineProps({
    //子组件接收父组件传递过来的值
    msg: String,
    check:{
        type:Boolean,
        default:false
    },
    placeholder:{
        type:String,
        default:"请选择"
    },
    value:{
        type:Array,
        default:[]
    },

})
onMounted(()=>{
    value.value = props.value as string[]
    import(`../../utils/cascader/${props.msg}.ts`).then(res=>{
        options.value = res.options
    })
    prop.value.checkStrictly = props.check
   
})


const handleChange = (value: string) => {
    let getLabel = cascaderAddr.value.getCheckedNodes()[0].pathLabels;  //获取options中的label
    emit('change',[props.msg,value,getLabel])
}

</script>

<style scoped>

</style>
